<template>
  <common-dialog ref="dialog" width="1000px" title="客户详情" :inDialog="inDialog" :data="data" @closed="onClosed">
    <el-alert v-show="data.id != data.mergerId" title="提示" type="warning" show-icon :closable="false">
      该客户已被合并到其它客户中。<span class="c-link" @click="openMainCustomer">[查看主客户]</span>
      <!-- <span
        class="c-link"
        style="margin-left:10px"
        @click="relieveMerger"
      >[解除合并关系]</span> -->
    </el-alert>
    <common-form ref="form" text-mode label-width="100px">
      <el-divider>客户信息</el-divider>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="客户ID">{{ data.id }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户代码">{{ data.code }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="原始名称">
            <el-tag v-if="data.isDeleted" type="danger" style="margin-right:5px">已作废</el-tag>
            <el-tag v-if="data.id != data.mergerId" type="warning" style="margin-right:5px">已合并</el-tag>{{ data.name }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="英文名称">{{ data.enName }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="中文名称">{{ data.zhName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="英文唯一">{{ data.nameUniqueValue }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中文唯一">{{ data.nameLocalizationUniqueValue }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="原始地址">{{ data.address }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="英文地址">{{ data.enAddress }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="中文地址">{{ data.zhAddress }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话">{{ data.tel }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="传真">{{ data.fax }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机">{{ data.phone }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱">{{ data.email }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户类型">{{ data.customerTypeName }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="认领时间">{{ data.claimTime }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成交状态">{{ data.cooperationStateName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最近跟进时间">{{ data.lastTraceLogTime }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最近报价时间">{{ data.lastQuotationTime }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最近成交时间">{{ data.lastTradeTime }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="创建时间">{{ data.creationTime }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最后更新时间">{{ data.lastModificationTime }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="同步旧ICP" class="no-border">
            <el-tag type="success" v-if="data.syncOldIcp">已同步</el-tag>
            <el-tag type="danger" v-else>未同步</el-tag>
            <span class="c-link" @click="openOldIcpDetail" v-if="data.syncOldIcp" style="margin-left:10px">查看</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审批状态">
            {{ data.examineStateName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider>所有人信息</el-divider>
      <el-table :data="data.ownUsers" border stripe>
        <el-table-column type="index" label="#" align="center" width="35"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column prop="creationTime" width="120" label="认领时间">
          <template v-slot="{ row }">
            <span>{{ row.creationTime | toShortDatetimeString }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-divider>操作事件</el-divider>
      <el-table :data="data.operationEvents" border stripe>
        <el-table-column type="index" label="#" align="center" width="35"></el-table-column>
        <el-table-column label="操作人" prop="creatorUserName" width="120"></el-table-column>
        <el-table-column label="操作内容" prop="content"></el-table-column>
        <el-table-column prop="creationTime" width="120" label="操作时间">
          <template v-slot="{ row }">
            <span>{{ row.creationTime | toShortDatetimeString }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-divider>审批记录</el-divider>
      <el-table :data="data.examines" border stripe>
        <el-table-column type="index" label="#" align="center" width="35"></el-table-column>
        <el-table-column label="申请人" prop="creatorUserName" width="80"></el-table-column>
        <el-table-column prop="creationTime" width="120" label="申请时间">
          <template v-slot="{ row }">
            <span>{{ row.creationTime | toShortDatetimeString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请类型" prop="examineTypeName" width="100"></el-table-column>
        <el-table-column label="审批状态" prop="examineStateName" width="80"></el-table-column>
        <el-table-column label="更改后内容" prop="approvalContent"></el-table-column>
        <el-table-column label="更前后内容" prop="beforeContent"></el-table-column>
        <el-table-column label="拒绝原因" prop="refuseReason"></el-table-column>
        <el-table-column label="审批备注" prop="applyRemark"></el-table-column>
        <el-table-column label="审批人" prop="examineUserName" width="80"></el-table-column>
        <el-table-column prop="examineTime" width="120" label="审批时间">
          <template v-slot="{ row }">
            <span>{{ row.examineTime | toShortDatetimeString }}</span>
          </template>
        </el-table-column>
        <el-table-column width="60" label="操作" fixed="right" align="center">
          <template v-slot="{ row }">
            <el-button type="text" @click="syncCustomerExamineToEs(row.id)">同步ES</el-button>
          </template>
        </el-table-column>
      </el-table>
    </common-form>
    <template slot="footer">
      <el-button @click="getData(data.id)">刷新</el-button>
      <el-button @click="syncCustomerToIcp" :loading="syncIcpLoading" type="primary">同步到旧ICP</el-button>

      <el-button @click="syncCustomerToEs" :loading="syncEsLoading" type="primary">同步到ES</el-button>
      <el-button @click="resetNameUniqueValue" :loading="resetNameLoading" type="primary">重置客户名称唯一值</el-button>
      <el-button @click="repairExamineStatus" :loading="repairLoading" type="primary">修复审批状态</el-button>
    </template>
    <detail-dialog ref="detailDialog" in-dialog></detail-dialog>
    <old-icp-detail-dialog ref="oldIcpDetailDialog" in-dialog></old-icp-detail-dialog>
  </common-dialog>
</template>
<script>
import commonDialog from "@/components/common/dialog";
import commonForm from "@/components/common/form";
import api from "@/api/crm/customer";
import oldIcpDetailDialog from "./oldIcpDetailDialog"

export default {
  props: {
    inDialog: {
      type: Boolean,
      default: false
    },
  },
  // mixins: [detailsDialogMixin],
  components: {
    commonDialog,
    commonForm,
    oldIcpDetailDialog
  },
  data() {
    return {
      syncEsLoading: false,
      syncIcpLoading: false,
      resetNameLoading: false,
      repairLoading: false,
      data: {
        id: "",
        name: "",
        mergerId: "",
        code: "",
        enName: "",
        zhName: ""
      },
      tabName: "location",
      api,
    };
  },
  created() {
    this.$options.components.detailDialog = () => import('./detailDialog')
  },
  methods: {
    openDetail(id) {
      this.$refs.dialog.open().then(() => {
        this.getData(id);
      });
    },
    getData(id) {
      this.$refs.dialog.loading(true);
      api.getDetail(id).then((res) => {
        this.$refs.dialog.loading(false);
        if (res.code != 0) {
          return;
        }
        this.data = res.data;
      });
    },
    onClosed() {
      this.$refs.form.reset();
      this.tabName = "location";
    },
    syncCustomerToEs() {
      this.syncEsLoading = true;
      api.syncCustomersToEs({ ids: [this.data.id] }).then(() => {
        this.syncEsLoading = false;
      });
    },
    syncCustomerToIcp() {
      this.syncIcpLoading = true;
      api.syncCustomersToIcp({ ids: [this.data.id] }).then(() => {
        this.syncIcpLoading = false;
      });
    },
    resetNameUniqueValue() {
      this.resetNameLoading = true;
      api.resetNameUniqueValue({ ids: [this.data.id] }).then((res) => {
        this.resetNameLoading = false;
      });
    },
    repairExamineStatus() {
      this.repairLoading = true;
      api.repairExamineStatus({ ids: [this.data.id] }).then((res) => {
        this.repairLoading = false;
      });
    },
    openMainCustomer() {
      this.$refs.detailDialog.openDetail(this.data.mergerId);
    },
    openOldIcpDetail() {
      this.$refs.oldIcpDetailDialog.openDetail(this.data.id);
    },
    relieveMerger() {

    },
    async syncCustomerExamineToEs(customerExamineId) {
      let res = await api.syncCustomerExamineToEs(customerExamineId);
      if (res.code != 0) {
        return;
      }
      this.$message.success("已发送同步");
    }
  },
};
</script>